<template>
	<view class="content">
		<nav-bar :title="$t('我的資產')"></nav-bar>
		<view>
			<!-- 大图片金额展示 -->
			<!-- <image src="../../assets/shop/sjk.png" class="img"></image> -->
			<view class="messageMain">
				<view style="margin-left: 10px;" class="howMoney">
					<view class="moneyTitle">{{ $t('總資產') }}(CFP)</view>
					<view class="totalMoney">{{ MyFlowMoney.remainsTotalAmount }}</view>
				</view>
				<view class="dayMoney">
					<view class="dayMoneyUp">
						<view class="money">
							{{ dayEarnings.dayIncomeAmount }}
						</view>
						<view class="moneyDescription">
							{{ $t('近1天收益') }}(CFP)
						</view>
					</view>
					<!-- 					<view class="dayMoneyUp">
						<view class="money">
							536.00000
						</view>
						<view class="moneyDescription">
							近1天产出(CFP)
						</view>
					</view> -->
				</view>
			</view>
			<!-- 充值流传 -->
			<view class="actionMoney">
				<view class="moneyBox" @click="clickMyRecharge" style="margin-bottom: 15rpx;">
					<image src="../../assets/shop/qian.png" class="moneyImg"></image>
					<view class="moneyTextMain">
						<view class="moneyText">
							{{ $t('充值') }}
						</view>
						<view class="moneyTextMs">
							{{ $t('充值到當前賬戶') }}
						</view>
					</view>
				</view>
				<view class="moneyBox" @click="clickMyCirculation">
					<image src="../../assets/shop/liu.png" class="moneyImg"></image>
					<view class="moneyTextMain">
						<view class="moneyText">
							{{ $t('流轉') }}
						</view>
						<view class="moneyTextMs">
							{{ $t('流轉到指定賬戶') }}
						</view>
					</view>
				</view>
			</view>
			<!-- tab栏代码 -->
			<view style="margin: 15rpx 0 15rpx 0; ">
				<view style="position: sticky;top:3rem;z-index: 1;background-color: #18171e;" class="tab">
					<view class="scroll-view-item_H" v-for="(tab, index) in list.tabBars" :key="index" :id="tab.id">
						<view class="titleIcon" @click="checkIndex(index)">
							<view :class="{ activite: navIndex == index }">{{ $t(`${tab.name}`) }}</view>
							<image src="../../assets/shop/line.png" class="line" v-if="navIndex == index"></image>
						</view>
					</view>
				</view>
				<!-- 内容 -->
				<!-- <swiper :current="navIndex" @change="tabChange" class="contentMain">
					<swiper-item class="swiper_item"> -->
				<view v-if="navIndex == 0">
					<view class="contentList" v-for="(item, index) in RevenueList1" :key="index">
						<view class="iconTitle">
							<image src="../../assets/shop/money.png" class="icon"></image>
							<view class="contentName">
								{{ $t(`${item.channeName}`) }}
							</view>
						</view>
						<view class="nameTimeMs" v-if="item.channelSource == 1"
							style="margin-left: 65rpx;display: flex;align-items: center;">
							<view>{{ $t('來源地址') }}:</view>
							<view class="cfpSize" style="">{{ item.urlCFP }}</view>
							<image src="../../static/cope.png" style="width: 35rpx;height: 35rpx;display: block;"
								@click="copy(item.urlCFP)" />
						</view>
						<view class="moneyTimeMain">
							<view class="myMoney">
								<view class="numsAndTime">
									{{ item.incomeAmount || item.amountFlow }}CFP
								</view>
								<view class="nameTimeMs" v-if="navIndex == 0">
									{{ $t('收入金額') }}
								</view>
								<view class="nameTimeMs" v-if="navIndex == 1">
									{{ $t('轉出金額') }}
								</view>
							</view>
							<view class="myMoney">
								<view class="numsAndTime">
									{{ item.createTimeStr }}
								</view>
								<view class="nameTimeMs">
									{{ $t('時間') }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="navIndex == 1">
					<view class="contentList" v-for="(item, index) in RevenueList2" :key="index">
						<view class="iconTitle">
							<image src="../../assets/shop/money.png" class="icon"></image>
							<!-- <view class="contentName" v-if="navIndex == 0">
								{{$t(`${item.channeName}`)}}
							</view> -->
							<view class="contentName">
								{{ $t(`${item.channeName}`) }}
							</view>
						</view>
						<view class="nameTimeMs" v-if="item.channelSource == 1"
							style="margin-left: 65rpx;display: flex;align-items: center;">
							<view>{{ $t('目標地址') }}:</view>
							<view class="cfpSize" style="">
								{{ item.urlCFP.substring(0, 6) }}......{{ item.urlCFP.substring(item.urlCFP.length - 6
									, item.urlCFP.length) }}</view>
							<image src="../../static/cope.png" style="width: 35rpx;height: 35rpx;display: block;"
								@click="copy(item.urlCFP)" />
						</view>
						<view class="moneyTimeMain">
							<view class="myMoney">
								<view class="numsAndTime">
									{{ item.incomeAmount || item.amountFlow }}CFP
								</view>
								<view class="nameTimeMs" v-if="navIndex == 0">
									{{ $t('收入金額') }}
								</view>
								<view class="nameTimeMs" v-if="navIndex == 1">
									{{ $t('轉出金額') }}
								</view>
							</view>
							<view class="myMoney">
								<view class="numsAndTime">
									{{ item.createTimeStr }}
								</view>
								<view class="nameTimeMs">
									{{ $t('時間') }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- </swiper-item> -->
				<!-- <swiper-item class="swiper_item ">
v						内容2222
					</swiper-item> -->
				<!-- </swiper> -->
			</view>
		</view>
		<!-- <m-tabbar fixed fill :current="1"></m-tabbar> -->
	</view>
</template>

<script setup>
import {
	onShow
} from "@dcloudio/uni-app"
//ref 简单的变量 reactive复杂数据结构 有个有意思的是 ref不用 终端是可以的 页面响应不了 上一次点击动作可以 这次加入原生组件不行！其实是一样的 let x = 0 之类直接用
//
import {
	ref,
	reactive,
	watch,
	onMounted,
	nextTick
} from "vue";
import {
	jump
} from "../../utils/common";
import apiFn from '@/hooks/shop.js'
import {
	onReachBottom
} from '@dcloudio/uni-app'
import {
	debounce
} from '@/utils/check.js'
import i18n from '@/locale/index'

const userId = ref('')
const page = ref({
	pageNum: 1,
	pageSize: 10
})
const total = ref(0)
async function getuserinfo() {
	const res = await uni.getStorage({
		key: 'setUserInfo'
	})
	userId.value = res.data.userId
	// getRevenueDetailsList()
	getDaySumIncomeAmout()
	checkIndex(0)
}
const copy = (e) => {
	uni.setClipboardData({
		data: e,
		success: function () {
			uni.showToast({
				title: `${i18n.global.t('複製成功')}`,
				duration: 1000,
				icon: 'none',
			})
		}
	})
}
// getuserinfo()
onShow(async () => {
	RevenueList1.value = []
	RevenueList2.value = []
	let list = {
		userId: uni.getStorageSync('setUserInfo').userId
	}
	let moneyAmoutData = await getMyFlowMoney('user/personalCenter', list)
	MyFlowMoney.value = moneyAmoutData

	getuserinfo()

	uni.setTabBarItem({
		index: 0,
		text: i18n.global.t('首頁'),
	})
	uni.setTabBarItem({
		index: 1,
		text: i18n.global.t('資產'),
	})
	uni.setTabBarItem({
		index: 2,
		text: i18n.global.t('我的'),
	})
})


const {
	revenueDetailsList,
	userAroundFlowList,
	daySumIncomeAmout,
	getMyFlowMoney
} = apiFn()
const navIndex = ref(0)
const MyFlowMoney = ref({})
let list = reactive({
	tabBars: [{
		name: '收入明細',
		id: 'shourumingxi'
	}, {
		name: '支出記錄',
		id: '支出記錄'
	}]
})
const checkIndex = (index) => {
	page.value.pageNum = 1
	page.value.pageSize = 10
	navIndex.value = Number(index)
	if (navIndex.value == 0) {
		getRevenueDetailsList(true)
	} else {
		getUserAroundFlowList(true)
	}
}
const tabChange = (e) => {
	const navIndexs = e.detail.current
	navIndex.value = navIndexs
}
const clickMyCirculation = () => {
	// jump({
	// 	path: 'myCirculation'
	// })
	uni.navigateTo({
		url: "/pages/myCirculation/myCirculation",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const clickMyRecharge = () => {
	// jump({
	// 	path: 'recharge'
	// })
	uni.navigateTo({
		url: "/pages/recharge/recharge",
		animationType: "fade-in",
		animationDuration: 200,
	});
}

//获取一天的收益
let dayEarnings = ref({
	dayIncomeAmount: 0,
	remainsTotalAmount: 0
})
const getDaySumIncomeAmout = async () => {
	if (!userId) return
	const res = await daySumIncomeAmout('order/daySumIncomeAmout', {
		userId: userId.value,
	})
	dayEarnings.value.dayIncomeAmount = res.dayIncomeAmount
	dayEarnings.value.remainsTotalAmount = res.remainsTotalAmount
}

//获取收入明细
let RevenueList1 = ref([])
let cancelRequest1 = false; // 取消标志位
const getRevenueDetailsList = async (val) => {
	if (!userId) return
	if (cancelRequest1) {
		return; // 如果取消标志位为true，直接返回，不再发送请求
	}
	cancelRequest1 = true
	setTimeout(() => {
		cancelRequest1 = false; // 2s后设置取消标志位为false
	}, 1000);
	if (val) {
		RevenueList1.value = []
	}
	const res = await revenueDetailsList('order/revenueDetailsList', {
		userId: userId.value,
		...page.value
	})

	nextTick(() => {
		RevenueList1.value = RevenueList1.value.length ? [...RevenueList1.value, ...res.records] : [...res.records]
	})
	total.value = res.total
}

//获取流转明细
let RevenueList2 = ref([])
let cancelRequest2 = false; // 取消标志位
const getUserAroundFlowList = async (val) => {
	if (!userId) return
	if (cancelRequest2) {
		return; // 如果取消标志位为true，直接返回，不再发送请求
	}
	cancelRequest2 = true
	setTimeout(() => {
		cancelRequest2 = false; // 2s后设置取消标志位为false
	}, 1000);
	if (val) {
		RevenueList2.value = []
	}
	const res = await userAroundFlowList('order/userAroundFlowList', {
		userId: userId.value,
		...page.value
	})
	// if (!res.records.length) {
	// 	return uni.showToast({
	// 		title: `${i18n.global.t('没有更多了')}!`,
	// 		icon: 'none',
	// 	})
	// }
	nextTick(() => {
		RevenueList2.value = RevenueList2.value.length ? [...RevenueList2.value, ...res.records] : [...res.records]
	})
	total.value = res.total
}

watch(navIndex, function (now) {
	// if (now === 0) {
	// 	getRevenueDetailsList()
	// 	getDaySumIncomeAmout()
	// } else if (now === 1) {
	// 	getUserAroundFlowList()
	// }
},
	// {
	// 	deep: true,
	// 	immediate: true
	// },
)

//上拉加载更多
onReachBottom(() => {
	page.value.pageNum++
	if (navIndex.value === 0) {
		if (RevenueList1.value.length >= total.value) {
			return uni.showToast({
				title: `${i18n.global.t('没有更多了')}!`,
				icon: 'none',
			})
		}
		getRevenueDetailsList()
	} else {
		if (RevenueList2.value.length >= total.value) {
			return uni.showToast({
				title: `${i18n.global.t('没有更多了')}!`,
				icon: 'none',
			})
		}
		getUserAroundFlowList()
	}
})
</script>

<style scoped>
.cfpSize {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	display: block;
	font-size: 22rpx;
	line-height: 22rpx;
	width: 230rpx;
}

.nameTimeMs {
	color: #808492;
	font-size: 22rpx;
}

.numsAndTime {
	color: #FFFFFF;
	font-size: 28rpx;
}

.moneyTimeMain {
	margin-top: 35rpx;
	display: flex;
	justify-content: space-between;
}

.myMoney {
	width: 320rpx;
	text-align: left;
}

.contentName {
	line-height: 40rpx;
	color: #FFFFFF;
	font-size: 28rpx;
	margin-left: 20rpx;

}

.iconTitle {
	display: flex;
	align-items: center;
}

.icon {
	width: 50rpx;
	height: 50rpx;
}

.titleIcon {
	text-align: center;
	height: 50rpx;
	margin-left: 35rpx;
}

.line {
	width: 30rpx;
	height: 10rpx;
	display: block;
	margin: 0 auto;
}

.activite {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 30rpx;
}

.scroll-view-item_H {
	display: inline-flex;
	align-items: center;
	color: #808492;
	font-size: 26rpx;
}

.contentList {
	background-color: #24232C;
	color: #fff;
	margin-top: 25px;
	padding: 15rpx;
}

.scroll-view_H {
	width: 100%;
	color: #CCCCCC;

}

.moneyTextMs {
	font-size: 22rpx;
	color: #808492;
}

.moneyText {
	font-weight: bold;
	color: #FFFFFF;
	font-size: 30rpx;
}

.moneyTextMain {
	margin-left: 20rpx;
}

.moneyBox {
	background-color: #24232C;
	border-radius: 8rpx;
	/* width: 280rpx; */
	padding: 25rpx;
	display: flex;
	align-items: center;
}

.actionMoney {
	margin-top: 30rpx;
	/* 		display: flex;
		align-items: center;
		justify-content: space-between; */
}

.moneyImg {
	width: 70rpx;
	height: 70rpx;
}

.box {
	padding: 30rpx;
}

.img {
	width: 100%;
}

.howMoney {
	text-align: left;
}

.moneyTitle {
	font-weight: 400;
	color: #12FFFA;
	line-height: 70rpx;
	font-size: 28rpx;
}

.totalMoney {
	font-weight: bold;
	color: #12FFFA;
	line-height: 60rpx;
	font-size: 55rpx;
}

.messageMain {
	width: 690rpx;
	height: 322rpx;
	box-sizing: border-box;
	background: url("@/assets/index/banner.png");
	background-size: 100% 100%;
	/* padding: 25rpx; */
	margin: 0 auto;
	padding: 25rpx;
}

.money {
	font-weight: bold;
	color: #12FFFA;
	font-size: 36rpx;
	text-align: center;
}

.moneyDescription {
	font-weight: 400;
	color: #12FFFA;
	line-height: 70rpx;
	font-size: 22rpx;
	text-align: center;
}

.dayMoneyUp {
	width: 320rpx;
}

.dayMoney {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
}
</style>